<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:if="${session.userInfo == null}">
        <meta charset="UTF-8">
        <title>个人信息</title>
        <link href="../static/bootstrap-4.6.1-dist/css/bootstrap.min.css" th:href="@{/bootstrap-4.6.1-dist/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
        <script src="../static/jQuery/jquery-3.6.0.min.js" th:src="@{/jQuery/jquery-3.6.0.min.js}"></script>
        <script src="../static/jQuery/jquery.cookie.js" th:src="@{/jQuery/jquery.cookie.js}"></script>
        <script src="../static/bootstrap-4.6.1-dist/js/bootstrap.bundle.js" th:src="@{/bootstrap-4.6.1-dist/js/bootstrap.bundle.js}"></script>
        <script type="text/javascript" src="../static/js/publicPart.js" th:src="@{/js/publicPart.js}"></script>
        <link href="../static/css/publicPart.css" rel="stylesheet" th:href="@{/css/publicPart.css}">
    </head>


    <link th:replace="publicPart ::commonHead">
    <link href="../static/css/userInfoPage.css" rel="stylesheet" th:href="@{/css/userInfoPage.css}">
    <script src="../static/js/userInfoPage.js" th:src="@{/js/userInfoPage.js}"></script>
    <style>
        #main{
            background-color: #20c997;
            background-image: url("https://cdn.acwing.com/static/web/img/background.png");
        }
    </style>

</head>
<body id="main">
<!--    导航栏-->
<div th:replace="publicPart :: navbar"></div>

    <div class="container" style="width: 1000px">
        <div class="mb-4 mt-1" style="height: 160px;width: auto;padding-top: 40px">
            <div class="m-auto d-flex" style="height:96px;width: 80%">
                <div class="mr-5" style="width: 96px;height: 96px">
                    <form id="uploadForm"role="form" action="/demo/upload" method="post" enctype="multipart/form-data" style="width: 100%;height: 100%">
                        <div class=" rounded-circle bg-primary" style="width: 100%;height: 100%">
                            <img id="userImage"class="img-circle m-auto  border-0 border-success" src="https://cdn.acwing.com/media/user/profile/photo/11531_sm_ef1b0ba0de.jpg" alt="头像" style="border:1px solid;border-radius: 50%; height:100%; width:100%;cursor: pointer;" th:src="${session.userInfo.userIcon}">
                            <input style="display: none" type="file" name="img" class="inputstyle rounded-circle"  id="upload" onchange="inputUpload()">
                            <button id="btnUpload"type="submit"style="display: none"></button>
                        </div>
                    </form>
                </div>
                <div style="height: auto;">
                    <div style="height: 30px">
                        <h2 class=""th:text="${session.userInfo.userName}">userName</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mb-4" style="width: auto">
            <div class="card-header">基本信息</div>
            <div class="card-body" style="">
                <div style="height: auto">
                <form id="form"action="/demo/userInfo/upDate" method="post">
                    <ul class="d-flex flex-column justify-content-between">
                        <li class="mr-auto d-flex mb-4"style="height: 25px;width: 80%">
                            <div class="mr-4"style="width: 72px;text-align-last:justify">用户昵称</div>
                            <input max="10" min="1" class="userInfoClass border-0" name="userName"value="gjh"th:value="${session.userInfo.userName}"></input>
                        </li>
                        <li class="mr-auto d-flex mb-4"style="height: 25px;width: 80%">
                            <div class="mr-4"style="width: 72px;text-align-last:justify">用户ID</div>
                            <div class="border-0" name="userId"value="1"th:text="${session.userInfo.userId}">1</div>
                        </li>
                        <li class="mr-auto d-flex mb-4"style="height: 25px;width: 80%">
                            <div class="mr-4"style="width: 72px;text-align-last:justify">性别</div>
                            <select class="userInfoClass border-0" name="userSex"value="男"th:value="${session.userInfo.userSex}">
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                        </li>
                        <li class="mr-auto d-flex mb-4"style="height: 25px;width: 80%">
                            <div class="mr-4"style="width: 72px;text-align-last:justify">出生日期</div>
                            <input type="date"class="userInfoClass border-0" name="userBirthday"value="2000"th:value="${session.userInfo.userBirthday}"></input>
                        </li>
                        <li class="mr-auto d-flex mb-4"style="height: 25px;width: 80%">
                            <div class="mr-4"style="width: 72px;text-align-last:justify">手机</div>
                            <input  max="10" min="1" class="userInfoClass border-0" name="userPhone"value="152"th:value="${session.userInfo.userPhone}"></input>
                        </li>
                        <li class="mr-auto d-flex mb-4"style="height: 25px;width: 80%">
                            <div class="mr-4"style="width: 72px;text-align-last:justify">邮箱</div>
                            <div id="userEmail" th:text="${session.userInfo.userEmail}">166</div>
                        </li>
                        <li style="display: none">
                            <input class="userInfoClass" name="userIcon" id="userIconInput"style="display: none" th:value="${session.userInfo.userIcon}"></input>
                            <input name="userId" th:value="${session.userInfo.userId}">
                        </li>

                    </ul>
                    <div class="d-flex justify-content-around">
                        <a class="btn disabled" id="btnChangInfo" href="#">保存修改</a>
                        <button class="btn btn-outline-info"data-toggle="modal" data-target="#myModal" id="btnChangePwd"type="button">修改用户密码</button>
                    </div>
                </form>
                </div>
            </div>
        </div>
        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header flex-column">
<!--                        <button class="btn border border-0 modal-title">验证密码</button>-->
<!--                        <button class="btn modal-title">验证邮箱</button>-->
                        <div class="d-flex w-100 h-75">
                            <ul class="list-inline mt-auto mb-auto mr-auto">
                                <li class="list-inline-item btn" id="selectPwdCheck">验证密码</li>
                                <li class="list-inline-item btn" id="selectEmailCheck">验证邮箱</li>
                            </ul>
                            <button type="button" class="close " data-dismiss="modal">&times;</button>
                        </div>
                        <div class="progress" id="progress" style="margin-left:0px;height: 5px;width: 96px;transition: all 1s" settle="0">
                            <div class="progress-bar" style="width:100%"></div>
                        </div>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <form id="modelInputForm">
                            <div>
                                <div class="input-group mb-3" id="pwdCheck">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">输入旧密码</span>
                                    </div>
                                    <input type="password" name="oldPwd"id="oldPwd"class="form-control modelInput">
                                </div>
                                <div class="input-group mb-3" id="emailCheck"style="display: none;">
                                    <input type="text" class="modelInput form-control" placeholder="验证码" id="mail" name="inputCode">
                                    <div class="input-group-append">
                                        <button type="button"class="input-group-text" id="getEmail">获取验证码</button>
                                    </div>
                                </div>

                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">输入新密码</span>
                                </div>
                                <input type="password" name="newPwd"id="newPwd"class="form-control modelInput">
                            </div>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">确认新密码</span>
                                </div>
                                <input type="password" id="ackPwd"class="form-control modelInput">
                            </div>

                        </form>
                        <div>
                            <code class="text-hide"id="modelMsg">密码错误</code>
                        </div>
                    </div>


                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <a type="button" href="#" id="btnUpdatePwd"class="btn btn-outline-info" >确认</a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>

                </div>
            </div>
        </div>

</body>

</html>